/*
Ribbons
=====================================
######Creates a corner ribbon element

A ribbon badge can be attached to the corner of a box. <br>Make sure the box has the `position:relative` property in order to keep the element at the right place.
```
<div class="ribbon is--left">
    <p class="ribbon--content orange">Highlight!</p>
</div>

<div class="ribbon is--right">
    <p class="ribbon--content green">Highlight!</p>
</div>
```
*/

.ribbon {
    width: 90px;
    width: 5.625rem;
    height: 90px;
    height: 5.625rem;
    position: absolute;
    overflow: hidden;
    z-index: @zindex-ribbon;
}
.ribbon .ribbon--content {
    padding: 5px 0px 5px 0px;
    padding: 0.3125rem 0rem 0.3125rem 0rem;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 12px;
    line-height: 0.75rem;
    display: block;
    position: absolute;
    width: 200%;
    text-align: center;
}
.ribbon .ribbon--content.green {
    background: #2ecc71;
    color: #ffffff;
}
.ribbon .ribbon--content.orange {
    background: #f1c40f;
    color: #ffffff;
}
.ribbon.is--left {
    top: 0;
    left: 0;
}
.ribbon.is--left .ribbon--content {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 26%;
    right: -40%;
}
.ribbon.is--right {
    top: 0;
    right: 0;
}
.ribbon.is--right .ribbon--content {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 26%;
    left: -40%;
}
.ribbon {
    .unitize-width(90);
    .unitize-height(90);
    position: absolute;
    overflow: hidden;
    z-index: @zindex-ribbon;

    .ribbon--content {
        .unitize-padding(5, 0);
        .unitize(font-size, 12);
        .unitize(line-height, 12);
        display: block;
        position: absolute;
        width: 200%;
        text-align: center;

        &.green {
            background: @badge-recommendation-bg;
            color: @badge-recommendation-color;
        }

        &.orange {
            background: @badge-newcomer-bg;
            color: @badge-newcomer-color;
        }
    }

    &.is--left {
        top: 0;
        left: 0;

        .ribbon--content {
            .rotate(-45deg);
            top: 26%;
            right: -40%;
        }
    }

    &.is--right {
        top: 0;
        right: 0;

        .ribbon--content {
            .rotate(45deg);
            top: 26%;
            left: -40%;
        }
    }
}